import React, { FC, lazy, Suspense } from 'react'
import { HashRouter, Route, Routes } from 'react-router-dom'


const SalesAnalysis = lazy(() => import('@/pages/salesAnalysis'))
const CustomerAnalysis = lazy(() => import('@/pages/customerAnalysis'))
const LogisticsAnalysis =lazy(() => import('@/pages/logisticsAnalysis'))
const FinanceAnalysis =lazy(() => import('@/pages/financeAnalysis'))
const TransportCosts  =lazy(() => import('@/pages/transportCosts'))
const MaterialStore =lazy(() => import('@/pages/materialStore'))
const GoodStore =lazy(() => import('@/pages/materialStore/goodStore'))
const ProductStore =lazy(() => import('@/pages/materialStore/productStore'))
const FinanceCosts=lazy(() => import('@/pages/financeAnalysis/financeCosts'))
const PurchaseGoods=lazy(() => import('@/pages/purchase/purchaseGoods'))
const PurchaseMaterial=lazy(() => import('@/pages/purchase/purchaseMaterial'))
export const menuList = [
    // {
    //     path: '/',
    //     element: <Suspense fallback={<div>Loading...</div>}>
    //         <SalesAnalysis />
    //     </Suspense>, name: '主页'
    // },
    {
        path: '/',
        element: <Suspense fallback={<div>Loading...</div>}>
            <SalesAnalysis />
        </Suspense>, name: '销售分析'
    },
    {
        path: '/customerAnalysis',
        element: <Suspense fallback={<div>Loading...</div>}>
            <CustomerAnalysis />
        </Suspense>, name: '客户分析'
    },
    {
        path: '/logisticsAnalysis',
        element: <Suspense fallback={<div>Loading...</div>}>
            <LogisticsAnalysis />
        </Suspense>, name: '物流分析'
    },
    {
        path: '/financeAnalysis',
        element: <Suspense fallback={<div>Loading...</div>}>
            <FinanceAnalysis />
        </Suspense>, name: '财务分析'
    },
    {
        path: '/financeCosts',
        element: <Suspense fallback={<div>Loading...</div>}>
            <FinanceCosts />
        </Suspense>, name: '成本费用分析'
    },
    {
        path: '/transportCosts',
        element: <Suspense fallback={<div>Loading...</div>}>
            <TransportCosts />
        </Suspense>, name: '运输费用'
    },
    {
        path: '/materialStore',
        element: <Suspense fallback={<div>Loading...</div>}>
            <MaterialStore />
        </Suspense>, name: '原料仓储'
    },
    {
        path: '/goodStore',
        element: <Suspense fallback={<div>Loading...</div>}>
            <GoodStore />
        </Suspense>, name: '物资仓储'
    }
    ,
    {
        path: '/productStore',
        element: <Suspense fallback={<div>Loading...</div>}>
            <ProductStore />
        </Suspense>, name: '产成品仓库'
    }
    ,
    {
        path: '/purchaseGoods',
        element: <Suspense fallback={<div>Loading...</div>}>
            <PurchaseGoods />
        </Suspense>, name: '物资采购'
    }
    ,
    {
        path: '/purchaseMaterial',
        element: <Suspense fallback={<div>Loading...</div>}>
            <PurchaseMaterial />
        </Suspense>, name: '原料采购'
    }
]

const myRouter: FC<{}> = () => {
    return (
        <Routes>
            {menuList.map((val) => <Route key={val.path} path={val.path} element={val.element} />)}
        </Routes>
    )
}
export default myRouter;